import {
  MenuFoldOutlined,
  MenuUnfoldOutlined,
  UploadOutlined,
  UserOutlined,
  VideoCameraOutlined,
} from "@ant-design/icons";
import { Layout, Menu } from "antd";
import React, { use, useState } from "react";
import "./home.css";
import { Outlet, useLocation, useMatch } from "react-router-dom";
import { useNavigate } from "react-router-dom";
const { Header, Sider, Content } = Layout;
const menus = [
  { key: "/test", icon: <UserOutlined />, label: "test" },
  { key: "/mobx", icon: <UserOutlined />, label: "mobx" },
  { key: "/redux", icon: <UserOutlined />, label: "redux" },
  { key: "/reduxTest", icon: <UserOutlined />, label: "reduxTest" },
];
const App = () => {
  const [collapsed, setCollapsed] = useState(false);
  const location = useLocation();
  const navigate = useNavigate();

  return (
    <Layout className="wrap">
      <Sider trigger={null} collapsible collapsed={collapsed}>
        <div className="logo" />
        <Menu
          theme="dark"
          mode="inline"
          selectedKeys={[location.pathname]}
          items={menus}
          onClick={(item) => {
            navigate(item.key);
          }}
        />
      </Sider>
      <Layout className="site-layout">
        <Header
          className="site-layout-background"
          style={{
            padding: 0,
          }}
        >
          {React.createElement(
            collapsed ? MenuUnfoldOutlined : MenuFoldOutlined,
            {
              className: "trigger",
              onClick: () => setCollapsed(!collapsed),
            }
          )}
        </Header>
        <Content
          className="site-layout-background"
          style={{
            margin: "24px 16px",
            padding: 24,
            minHeight: 280,
          }}
        >
          <Outlet></Outlet>
        </Content>
      </Layout>
    </Layout>
  );
};
export default App;
